<template>
  <div class="permissionAssignment h100">
    <div class="PageContent">
        <el-col :span="4" class="left-tree">
          <el-tree :data="systemPermissionData" ref="systemPermissionTree"
                   :props="defaultProps"
                   node-key="id"
                   default-expand-all
                   check-strictly
                   highlight-current
                   @node-click="handleClick"
          ></el-tree>
        </el-col>
        <el-col :span="4" class="right-tree overflow_scroll">
          <el-tree :data="rolePermissionData" ref="rolePermissionTree"
                   :props="defaultProps"
                   node-key="id"
                   default-expand-all
                   check-strictly
                   highlight-current
                   @node-click="roleHandleClick"
          ></el-tree>
        </el-col>
        <el-col :span="16" class="right-tree">
          <el-tabs type="border-card" v-model="tabSelect">
            <el-tab-pane label="角色成员">
              <el-row style="text-align: left;line-height: 5em;" class="fileSearch">
                <el-button type="primary" v-if="btnRight.btnPerAssRefresh" @click="refresh()">刷新</el-button>
                <el-button type="primary" v-if="btnRight.btnPerAssAdd" @click="add()">添加成员</el-button>
                <el-button type="danger" v-if="btnRight.btnPerAssDelete" @click="remove()">删除成员</el-button>
              </el-row>
              <el-table
                ref='rolePermissionTable'
                :data="roleData" :header-cell-style="{background:'rgb(222,225,230)',color:'#606266'}"
                row-key="id"
                border
                highlight-current-row
                default-expand-all
                @row-click="handleRowClick"
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                @select="select" @select-all="selectAll"
                :height="tableHeight">
                <el-table-column
                  type="selection"
                  width="55">
                </el-table-column>
                <el-table-column
                  property="jobNo"
                  label="工号"
                  align='center'
                  width="100">
                </el-table-column>
                <el-table-column
                  property="fullName"
                  label="姓名"
                  align='center'
                  min-width="100">
                </el-table-column>
                <el-table-column
                  property="userGender"
                  label="姓别"
                  align='center'
                  width="100">
                </el-table-column>
                <el-table-column
                  property="mobilePhone"
                  label="手机"
                  align='center'
                  width="100">
                </el-table-column>
                <el-table-column
                  property="otherPhone"
                  label="其他电话"
                  align='center'
                  width="100">
                </el-table-column>
                <el-table-column
                  property="companyName"
                  label="所属公司"
                  align='center'
                  width="200">
                </el-table-column>
                <el-table-column
                  property="departmentName"
                  label="所属部门"
                  align='center'
                  width="200">
                </el-table-column>
                <el-table-column
                  property="disableState"
                  label="状态"
                  align='center'
                  width="80">
                  <template slot-scope="{row,$index}">
                    <span v-if="row.disableState==0">有效可用</span>
                    <span v-else-if="row.disableState==1">无效禁用</span>
                  </template>
                </el-table-column>
              </el-table>
              <div style="margin-top: 20px">
              </div>
            </el-tab-pane>
            <el-tab-pane label="菜单、按钮权限">
              <el-row style="text-align: left;line-height: 5em;">
                <el-button type="primary" v-if="btnRight.btnPerAssMenuRefresh" @click="refresh()">刷新</el-button>
                <el-button type="primary" v-if="btnRight.btnPerAssRelation" @click="relation()">授权</el-button>
              </el-row>
              <el-table
                ref='menuPermissionTable'
                :data="menuData" :header-cell-style="{background:'rgb(222,225,230)',color:'#606266'}"
                row-key="id"
                border
                highlight-current-row
                default-expand-all
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                style="width: 100%;height: calc(100vh - 245px);overflow-y: scroll">
                <el-table-column
                  property="menuName"
                  label="菜单名称"
                  width="300">
                  <template slot-scope="props">
                    <el-checkbox name="type" :checked="props.row.selected>0?true:false" v-model="props.row.selected"
                    @change="fn(props.row)"
                    >
                      {{props.row.menuName}}
                    </el-checkbox>
                  </template>
                </el-table-column>
                <el-table-column
                  property="buttons"
                  label="菜单按钮"
                  align='left'>
                  <template slot-scope="props">
                    <el-checkbox :key='index' v-for="(item,index) in props.row.buttons" name="type" :checked="item.selected>0?true:false"
                                 v-model="item.selected" :disabled="!props.row.selected">
                      {{`【${item.buttonDescribe}】`}}
                    </el-checkbox>
                  </template>
                 <!-- {{`${item.buttonName}【${item.buttonDescribe}】`}}-->
                </el-table-column>
              </el-table>
              <div style="margin-top: 20px">
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-col>
    </div>
    <el-dialog title="选择角色成员" :visible.sync="dialogVisible" width="700px" @open="openSelectedUser()" v-dialogDrag
               border>
      <el-row class="height300">
        <el-col :span="8" class="left-tree roleclass " style="overflow-y: auto;height: 300px;">
          <el-tree ref="organizationUserTree"
                   :props="defaultProps"
                   node-key="orjId"
                   :load='loadNode'
                   lazy
                   default-expand-all
                   show-checkbox
                   highlight-current
                   @check-change="orgHandleClick"
          ></el-tree>
        </el-col>
        <el-col :span="16" class="right-tree border-left" style="overflow-y: auto;">
          <el-row>
            已选中用户:
          </el-row>
          <div class="item-wrapper" v-if="userList.length>0">
             <!-- <span :key="index" v-for="(item,index) in userList" class="item-label" @mouseenter="item.flag = true"
                  @mouseleave="item.flag = false">{{item.label}}
              <i v-show="item.flag" @click="deleteUser(item.orjId,true)" class="item-icon el-icon-circle-close"></i>
            </span> -->
            <el-tag
              v-for="tag in userList"
              :key="tag.orjId"
              @close='deleteUser(tag.orjId,true)'
              closable>
              {{tag.label}}
            </el-tag>
          </div>
          <div v-else class="no_data">暂无数据</div>
        </el-col>
      </el-row>

      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="primary" v-if="btnRight.btnPerAssSave" @click="Save()" :disabled="saveFlag">保存</el-button>
        <el-button  v-if="btnRight.btnPerAssCancel" @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import * as API from '@/api/stystemManagement'

  export default {
    name: "permissionAssignment",
    data() {
      return {
        rules: {
          buttonName: [{required: true, message: '请输入菜单按钮', trigger: 'blur'}],
          buttonDescribe: [{required: true, message: '请输入按钮描述', trigger: 'blur'}],
          disableState: [{required: true, message: '请选择禁用状态', trigger: 'blur'}],
        },
        systemPermissionData: [{
          id: 0,
          label: '殡葬业务平台',
          children: []
        }],
        rolePermissionData: [{
          id: 0,
          label: '角色',
          children: []
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        TreeData:[],//树数据
        organizationTreeData: [{
          id: 0,
          type: 0,
          label: '组织机构',
          children: []
        }],
        roleData: [], //角色成员表格数据
        tableHeight:0,
        menuData: [], //菜单权限表格数据
        currentRow: null,
        roleTableSelection: [],//角色成员表格数据
        menuTableSelection: [],//菜单权限表格数据
        userList: [
          // {name:"用户1",flag:false},
          // {name:"用户2",flag:false},
          // {name:"用户3",flag:false},
          // {name:"用户4",flag:false},
          // {name:"用户4",flag:false},
          // {name:"用户5",flag:false},
        ],//选中的用户
        tabSelect: 0,
        saveFlag: false, //保存标志
        onpresscTime:0,  //  阻止短时间内连续点击
        dialogVisible: false,//维护对话框
        disableState: [
          {label: "有效可用", value: 0}, {label: "无效禁用", value: 1},
        ],
        saveData: {       //保存基本信息

        },
        IdsArry: [],
        IdsBtnArry: [],
        orjId: 1,/*组织结构中唯一的标志*/
        btnRight: {
          btnPerAssAdd: true, //添加成员
          btnPerAssRefresh: true,//刷新
          btnPerAssDelete: true,//删除成员
          btnPerAssSave: true,//保存
          btnPerAssCancel: true,//取消
          btnPerAssMenuRefresh: true,//菜单刷新
          btnPerAssRelation: true,//授权
        }
      }
    },
    mounted() {
      this.loadBusinessSystemListData()
      //载入按钮
      this.btnRight = this.$route.meta.buttons;
      //遍历属性赋值将true与false字符串转换成布尔型的值
      for (let key of Object.keys(this.btnRight)) {
        this.btnRight[key]=(this.btnRight[key]|| this.btnRight[key]=="true")?true:false;
      }
      var that=this
      window.onresize=function() {
        var search = document.getElementsByClassName("fileSearch")[0].offsetHeight
        var dom = document.getElementsByClassName("PageContent")[0].offsetHeight
        that.tableHeight =dom - search - 130
      }
      //加载成员单位树
      //this.loadOrganizationTreeWithParentIdData()
    },
    //注销window.onresize事件
    destroyed(){
      window.onresize = null;
    },
    updated(){
      this.$nextTick(()=>{
        var dom = document.getElementsByClassName("PageContent")[0].offsetHeight
        var search = document.getElementsByClassName("fileSearch")[0].offsetHeight
        this.tableHeight =dom - search - 130
      })
    },
    methods: {

      //成员单位树
      //加载树
      loadOrganizationTreeWithParentIdData() {
        let postData = {
          id: 0,
        };
        API["loadOrganizationTreeWithParentId"](postData)
          .then((response) => {
            const { data } = response;
            // this.treeData[0].children = data;
            let node = {
              id:0,
              label: '组织机构',
              children: []
            }

            let arr = this.getChildren(node,data)

            this.organizationTreeData = [arr];
            console.log(data,'没改变')
            console.log("组织",this.organizationTreeData);
          })
          .catch((error) => {
            this.$message(error);
          });
      },
      fn(row){
        console.log(row)
        if(row.selected){
          row.children.forEach(item=>{
            item.selected=true
          })
        }else {
          row.children.forEach(item=>{
            item.selected=false
          })
        }

      },
      //系统tree单选
      handleClick(data, checked, node) {
        if (checked && data.label != "殡葬业务平台") {
          this.$refs.systemPermissionTree.setCheckedNodes([data]);
          this.loadRoleListWithBusinessSystemIdData(data.id)
        }
      },

      //角色tree单选
      roleHandleClick(data, checked, node) {
        if (checked && data.label != "角色") {
          this.$refs.rolePermissionTree.setCheckedNodes([data]);
          // console.log(this.$refs.rolePermissionTree.getCheckedNodes())
          if (this.tabSelect == 0) {
            this.loadRoleUserWithRoleIdData(data.id)
          } else if (this.tabSelect == 1) {
            let system = this.$refs.systemPermissionTree.getCheckedNodes()
            if (system.length)
              this.loadRoleMenuButtonWithRoleIdData({
                "businessSystemId": system[0].id,
                "businessSystemRoleId": data.id
              })
          }
        }
      },

      //组织结构tree单选
      orgHandleClick(data, checked, node) {
        console.log(data)
        // let selectArr=this.$refs.organizationUserTree.getCheckedNodes(true);
        // console.log("选择成员单位",this.$refs.organizationUserTree.getCheckedNodes(true))
        // this.userList=this.$refs.organizationUserTree.getCheckedNodes(true);
        if(data.type){
          if(checked)
            {
              this.userList=this.userList.concat(data);
            }else
            {
              this.deleteUser(data.orjId,false);
            }
        }
      },
      /*角色成员显示区域*/
      //点击行触发，选中或不选中复选框
      handleRowClick(row, column, event) {
        this.$refs.rolePermissionTable.toggleRowSelection(row);
        let data=this.$refs.rolePermissionTable.selection
        this.roleTableSelection = data
      },
      select(selection, row) {
        this.roleTableSelection = selection
      },
      selectAll(selection) {
        this.roleTableSelection = selection
      },
      /*角色成员显示区域*/
      //递归获得树的子集
      getChildren(node, data) {
        let this_get = this;
        let child = new Array();
        if (this_get.checkIsNode(node, data)) {
          if (data && data.length) {
            data.forEach(item => {
              if (node.id == item.parentId && item.label) {
                let nodeItem = {
                  id: item.id,
                  label: item.label,
                  value:item.id,
                  flag :false,
                };
                if (this_get.checkIsNode(nodeItem, data)) {
                  if (!nodeItem.children) {
                    nodeItem.children = new Array();
                  }
                  nodeItem.children.push(this_get.getChildren(nodeItem, data));
                }
                child.push(nodeItem);
              }
            });
            node.children = child;
            return node;
          }
        } else {
          return node;
        }
      },
      //判断是否是节点
      checkIsNode(node, data) {
        let flag = false;
        if (data && data.length && data.length > 0) {
          for (let i = 0; i < data.length; i++) {
            if (node.id == data[i].parentId) {
              flag = true;
              return flag;
            }
          }
        }
        return flag;
      },
      /*懒加载*/
      /*加载系统中单位部门下的用户信息，使用懒加载方式*/
      loadNode(node, resolve) {
        console.log("加载树",node)
        // 初始化第一层
        if (node.level == 0) {
          return resolve(this.organizationTreeData);
        }
        // 懒加载子数据
        /*加载*/
        // 如果不是部门不进行懒加载
        if (node.data.type != 0) {
          console.log("没有记载在在")
          return resolve([]);
        }
        let nodeData = [];
        let postData1 = {
          "id": node.data.id
        }

        API['loadOrganizationTreeWithParentId'](postData1).then(response => {
           let orgData = response.data;
          console.log("返回数",response.data)
           const { data } = response;
          //let arr = this.getChildren(node,data)

           if(orgData.length){
              orgData.forEach(item => {
                if(item.parentId==node.data.id){
                  nodeData.push({
                    type:0,
                    id:item.id,
                    label:item.label,
                    children:[],
                    flag:false,
                    orjId:this.orjId++
                  })
                }
              });
           }
           console.log("处理一次",nodeData)
          // if (orgData.length) {
          //   orgData.forEach(item => {
          //     item.type = 0                 //为0时为部门，1为
          //     item.children = []
          //     item.flag = false             //删除图标显示与否
          //     item.orjId = this.orjId++;
          //     nodeData.push(item)
          //   });
          // }

          let postData = {departmentId: node.data.id};
          API['loadAccountUserTreeWithDepartmentId'](postData).then(responseUser => {
            let userData = responseUser.data;
            if (userData.length) {
              userData.forEach(item => {
                item.type = 1
                item.isLeaf = true;
                item.flag = false
                item.orjId = this.orjId++;
                nodeData.push(item)
              })
            }
            return resolve(nodeData);
          }).catch(error => {
            this.$message(error)
            return resolve([]);
          })

        }).catch(error => {
          this.$message(error)
          return resolve([]);
        })
      },
      /*刷新*/
      refresh(){
        let data  = this.$refs.rolePermissionTree.getCheckedNodes()
        if (this.tabSelect == 0) {
          this.loadRoleUserWithRoleIdData(data[0].id)
        } else if (this.tabSelect == 1) {
          let system = this.$refs.systemPermissionTree.getCheckedNodes()
          if (system.length)
            this.loadRoleMenuButtonWithRoleIdData({
              "businessSystemId": system[0].id,
              "businessSystemRoleId": data[0].id
            })
        }
      },
      //追加成员
      add() {
        let data = this.$refs.rolePermissionTree.getCheckedNodes()
        //添加子系统的角色成员
        if (data.length == 0) {
          this.$message("未选中角色")
          return
        } else {
          this.dialogVisible = true
        }
      },
      openSelectedUser() {
        let data = this.$refs.organizationUserTree;

      },
      //删除角色用户关联信息
      remove() {
        let data = this.roleTableSelection
        if (data.length == 0) {
          this.$message("未选中成员")
          return
        }
        this.$confirm('删除信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let postData = []
          data.forEach(item => {
            postData.push({
              "id": item.roleUserRelationId,
              "version": item.version
            })
          })
          API['deleteRoleUserRelationWithId'](postData).then(response => {
            const {message} = response;
            this.$message(message)
            this.roleTableSelection = []
            let data = this.$refs.rolePermissionTree.getCheckedNodes()
            this.loadRoleUserWithRoleIdData(data[0].id)
          }).catch(error => {
            this.$message(error)
          })
        }).catch(() => {
          //几点取消的提示
        });
      },
      //删除用户
      deleteUser(orjId,changeTreeCheckedState) {
        // this.userList.splice(index, 1)
        let keys=[];
        for(let i=0; i<this.userList.length; i++)
        {
          if(this.userList[i].orjId===orjId)
          {
            this.userList.splice(i,1);
          }
          else
          {
            keys.push(this.userList[i].orjId);

          }
        }
        // console.log("keys",keys,this.userList)
        // let idx=this.userList.findIndex(item=>{
        //   return item.orjId===orjId
        // })
        //console.log('删除',idx)
        //this.userList.splice(idx,1);
        if(changeTreeCheckedState)
        {
          this.$refs.organizationUserTree.setCheckedKeys(keys);
        }
      },
      //加载系统列表
      loadBusinessSystemListData() {
        API['loadBusinessSystemList']().then(response => {
          const {data} = response;
          if (!data) {
            this.$message('数据读取失败')
            return
          }
          if (data && data.length) {
            data.forEach(item => {
              item.label = item.systemName
              this.systemPermissionData[0].children.push(item)
            })
          }
        }).catch(error => {
          this.$message(error)
        })
      },
      //根据业务系统id，加载系统下所有角色
      loadRoleListWithBusinessSystemIdData(code) {
        let postData = {
          "businessSystemId": code,
          "roleName": "",
          "roleTypeCode": "",
          "disableState": ""
        }
        return new Promise(resolve => {
          API['loadRoleListWithBusinessSystemId'](postData).then(response => {
            const {data} = response;
            if (!data) {
              this.$message('数据读取失败')
              return
            }
            if (data.length) {
              data.forEach(item => {
                if (item.roleCode && item.roleName) {
                  item.id = item.id
                  item.label = item.roleName
                }
              })
            }
            this.rolePermissionData[0].children = data
            resolve(data)
          }).catch(error => {
            this.$message(error)
          })
        })
      },
      /*根据角色id加载角色关联的用户信息*/
      loadRoleUserWithRoleIdData(code) {
        let postData = {
          "businessSystemRoleId": code,
        }
        API['loadRoleUserWithRoleId'](postData).then(response => {
          const {data} = response;
          if (!data) {
            this.$message('数据读取失败')
            return
          }
          this.roleData = data
        }).catch(error => {
          this.$message(error)
        })
      },
      //保存
      Save() {
        if ((Date.now() - this.onpresscTime) > 2000) {
          this.onpresscTime = Date.now()
          console.log(Date.now())
        }else{
          return
        }
        let postData = []
        let role = this.$refs.rolePermissionTree.getCheckedNodes()
        if (this.userList && this.userList.length) {
          this.userList.forEach(item => {
            postData.push({
              "businessSystemRoleId": role[0].id,
              "systemUserId": item.id
            })
          })
        }else{
          this.$message("没有要保存的数据")
          return
        }
        this.saveFlag = true
        API['saveRoleUserRelation'](postData).then(response => {
          const {message} = response;
          this.$message(message)
          this.dialogVisible = false
          this.saveFlag = false
        }).catch(error => {
          this.$message(error)
          this.saveFlag = false
        })
      },
      /**/
      loadRoleMenuButtonWithRoleIdData(data) {
        let postData = {
          "businessSystemId": data.businessSystemId,
          "businessSystemRoleId": data.businessSystemRoleId
        }
        API['loadRoleMenuButtonWithRoleId'](postData).then(response => {
          const {data} = response;
          /*测试*/
          data.forEach(item => {
            if (item.selected == 0) {
              item.selected = false
            } else if (item.selected > 0) {
              item.selected = true
            } else {
              item.selected = false
            }
            if (item.buttons && item.buttons.length) {
              item.buttons.forEach(btn => {
                if (btn.selected == 0) {
                  btn.selected = false
                } else if (btn.selected > 0) {
                  btn.selected = true
                } else {
                  btn.selected = false
                }
              })
            }
          })
          this.menuData = data;
          let arry = this.sort(this.menuData)
          this.menuData = []
          for (let i = 0; i < arry.length; i++) {
            this.menuData.push(arry[i])
          }
        }).catch(error => {
          this.$message(error)
        })
      },
      /*查询选中的角色，菜单id*/
      searchSelected(data, roleid) {
        let children = []
        let thisArr=[];
        if (data && data.length>0) {
          data.forEach(item => {
            if (item.selected == true) {
              thisArr.push({
                "businessSystemRoleId": roleid,
                "businessSystemMenuId": item.id
              })
            }
            if (item.children && item.children.length>0) {
              children = this.searchSelected(item.children, roleid)
              thisArr= thisArr.concat(children)
            }

          })
        }
        return thisArr
      },
      /*查询选中的角色，菜单id,按钮id*/
      searchBtnSelected(data, roleid) {
        let children = []
        let thisArr = [];
        if (data && data.length) {
          data.forEach(item => {
            if ( item.selected == true) {
              if (item.buttons && item.buttons.length) {
                item.buttons.forEach(id => {
                  if (id.selected == true) {
                    thisArr.push({
                      "businessSystemRoleId": roleid,
                      "businessSystemMenuId": item.id,
                      "businessSystemMenuButtonId": id.id
                    })
                  }
                })
              }
            }
            if (item.children && item.children.length) {
              children = this.searchBtnSelected(item.children, roleid)
              thisArr = thisArr.concat(children)
            }

          })
        }
        return thisArr;
      },
      /*授权*/
      relation() {
        let roleSelect = this.$refs.rolePermissionTree.getCheckedNodes()
        this.IdsArry = []
        this.IdsBtnArry = []
        /*查询选中的角色，菜单id*/
        var menuArr = this.searchSelected(this.menuData, roleSelect[0].id);
        menuArr = Array.from(new Set(menuArr));
        /*查询选中的角色，菜单id,按钮id*/
        var btnArr= this.searchBtnSelected(this.menuData, roleSelect[0].id);
        btnArr = Array.from(new Set(btnArr));
        let postData = {
          "businessSystemRoleId": roleSelect[0].id,
          "roleMenuRelations": menuArr,
          "roleMenuButtonRelations": btnArr
        }
        API['saveRoleMenuButtonRelation'](postData).then(response => {
          const {message} = response;
          this.$message(message)
        }).catch(error => {
          this.$message(error)
        })
      },
      sort(data) {
        let result = []
        //循环遍历取出子集
        if (data.length) {
          //查询不是主菜单的子菜单,arr为子菜单，id为有子菜单的ids
          let arr = [], id = []
          data.forEach(item => {
            if (item.parentId != 0) {
              arr.push(item)
              if (id.indexOf(item.parentId) == -1) {
                id.push(item.parentId)
              }
            }
          })
          //设置有子菜单的children
          id.forEach(d => {
            data.forEach(item => {
              if (d == item.id) {
                item.children = []
              }
            })
          })
          //添加子菜单
          if (arr.length > 0) {
            arr.forEach(a => {
              data.forEach((item, index) => {
                if (a.parentId == item.id) {
                  if (item.children) {
                    item.children.push(a)
                  }
                }
                // /*删除子菜单*/
                // if (item.parentId!=0) {
                //   data.splice(index,1)
                // }
              })
            })
            data.forEach((item, index) => {
              /*删除子菜单 */
              if (item.parentId == 0) {
                result.push(item)
              }
            })

          }
        }
        return result
      },
    },
    watch: {
      "tabSelect"() {
        if (this.tabSelect == 1) {
          let role = this.$refs.rolePermissionTree.getCheckedNodes()
          let system = this.$refs.systemPermissionTree.getCheckedNodes()
          if (system.length && role.length)
            this.loadRoleMenuButtonWithRoleIdData({
              "businessSystemId": system[0].id,
              "businessSystemRoleId": role[0].id
            })
        } else if (this.tabSelect == 0) {
          let role = this.$refs.rolePermissionTree.getCheckedNodes()
          if (role.length)
            this.loadRoleUserWithRoleIdData(role[0].id)
        }
      },
      "dialogVisible"(){
        if (this.dialogVisible == false) {
          this.userList = [];
          this.$refs.organizationUserTree.setCheckedNodes([]);
          let data = this.$refs.rolePermissionTree.getCheckedNodes()
          this.loadRoleUserWithRoleIdData(data[0].id)
        }
      }
    }
  }
</script>
<style>
  .permissionAssignment .el-dialog {
    height: 500px;
  }

  .permissionAssignment .roleclass .el-tree {
    height: 100%;
  }
  .permissionAssignment .el-table .cell {
    max-height: none ;
  }
</style>
<style scoped>
  .permissionAssignment {
    font-size: 16px;
  }

  .height300 {
    height: 300px;
    overflow: hidden;
  }

  .item-wrapper {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    height: 80px;
    /*overflow: scroll;*/
  }

  .item-label {
    display: inline-block;
    flex: 0 0 100px;
    position: relative;
    margin-right: 10px;
    height: 30px;
  }

  .item-label .item-icon {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 1rem;
    color: rgb(107, 150, 236);
  }

  #organizationUserTree .el-tree-node .is-leaf + .el-checkbox .el-checkbox__inner {
    display: none;
  }

  #organizationUserTree .el-tree-node .el-checkbox .el-checkbox__inner {
    display: inline-block;
  }
  .item-wrapper .el-tag{
    margin:10px;
  }
  .no_data{
    text-align: center;
    width: 100%;
    margin-top: 100px;
  }
  .overflow_scroll .el-tree{
    overflow:scroll
  }
</style>
